{include file="header.tpl"} {include file="selectArea.tpl"} {block name=body}
<style>
a{
text-decoration:none;
}
</style>
	<script>
		$(document).ready(function() {
			//To display the selected area
		 	 var selectedAreaName = sessionStorage.getItem("selectedAreaName");
		     document.getElementById("popId").text=selectedAreaName;
		});
	 </script>
	 
<div style="margin-left: -250px; margin-top: -165px; display: block;" class="signUp">
<div style="border: 1px solid #ccc; height:450px;">
			<div style="border-bottom: 1px solid #ccc; margin: 20px 30px 15px 30px;" class="sign-box-head pb10">
			    <p><label style="font-family:arial; font-size: 20px; color:black;">Create new customer account</label></p>
			</div>
			<form  action="/Project001/phpFiles/registration.php" method="post">
				<div class="pop-form-row pb10">
		      		<label style="padding-left:7%; color:#666; font-family:arial; font-size: 12px;">Name</label>
		            <input style="padding-left:2%; font-size: 11px;" type="text" placeholder="First name" name="first_name" required class="txtbx txtbx-wid1">
		            <input style="padding-left:2%; font-size: 11px;" type="text" placeholder="Last name" name="last_name" required class="txtbx txtbx-wid1 lname">
		        </div>
		        <div class="pop-form-row pb10">
		      		<label style="padding-left:4.1%; color:#666; font-family:arial; font-size: 12px;">Address</label>
		            <input style="padding-left:2%; font-size: 11px; width:304px;" type="text" placeholder="Address" name="address">
		        </div>
		        <div class="pop-form-row pb10">
		      		<label style="padding-left:10%; color:#666; font-family:arial; font-size: 12px;">City</label>
		            <input style="padding-left:2%; width:27%; font-size: 11px;" type="text" placeholder="Enter Your City" name="city">
		            <label style="padding-left:4%; color:#666; font-family:arial; font-size: 12px;">State</label>
		            <input style="padding-left:2%; width:27%; font-size: 11px;" type="text" placeholder=" Enter Your State" name="state">
		        </div>
		        <div class="pop-form-row pb10">
		      		<label style="padding-left:4%; color:#666; font-family:arial; font-size: 12px;">Pincode</label>
		            <input style="padding-left:2%; font-size: 11px; width:304px;" type="pincode" placeholder="Pincode" name="pincode">
		        </div>
	            <div class="pop-form-row pb10">
	            	<label style="padding-left:7.5%; color:#666; font-family:arial; font-size: 12px;">Email</label>
	            	<input style="padding-left:2%; font-size: 11px; width:304px;" type="email" placeholder="example@example.com" name="email" required>
	            </div>
	            <div class="pop-form-row pb10 full-width">
	            	<label style="padding-left:6%; color:#666; font-family:arial; font-size: 12px;">Mobile</label>
	            	<input style="padding-left:2%; font-size: 11px; width:304px;" type="Mobile" placeholder="Mobile" name="phone" required class="txtbx txtbx-wid1">
	            </div>
	            <div class="pop-form-row pb10">
                	<label style="padding-left:2%; color:#666; font-family:arial; font-size: 12px;">Password</label>
                	<input style="padding-left:2%; font-size: 11px;" type="password" placeholder="Enter Password" name="password" required class="txtbx txtbx-wid1">
                	<input style="padding-left:2%; font-size: 11px;" type="password" placeholder="Confirm Password" name="confirm_password" required class="txtbx txtbx-wid1 lname">
                </div>
                <div class="pop-form-row pb10">
                <label style="padding-left:5%; color:#666; font-family:arial; font-size: 12px;">Gender</label>
                <input style="vertical-align: bottom;" type="radio" value="male" name="gender">
                <label style="color:#666; font-family:arial; font-size: 12px;">Male</label>
                <input style="vertical-align: bottom;" type="radio" value="female" name="gender">
                <label style="color:#666; font-family:arial; font-size: 12px;">Female</label>
          		</div>                           
          		<div style="margin-left:70px;">
          			<input onmouseover="this.style.backgroundColor='#F0F0F0'" onmouseout="this.style.backgroundColor=''" 
					style="color:grey;" class="button silverbtn" type="submit" name="submit" value="Sign Up"> 
				</div>
	        </form>
     </div>
     </div>
{/block}
{include file="footer.tpl"}
